<%@ include file="/WEB-INF/views/commons/header.jsp" %>
<%@ include file="/WEB-INF/views/commons/menu.jsp" %>
<!-- START BODY -->
<link href="<pc:GetUrlUriTags value="/resources/css/search/search.css" />" media="screen" rel="stylesheet" type="text/css" />
<table class="topSubject" width="100%" border="0">  
  <tr>
    <td height="30px"  width="34px">
    	<img alt="" src="<pc:GetUrlUriTags value="/resources/image/icons/png_apps/32x32/cloud-1.png" />" style="text-decoration: none; border-width: 0px;">
    </td>
    <td height="30px" align="left">
    	<div>
			<strong><a href="<pc:GetUrlUriTags value="/fi/outbound/rental/invoice/index" />" class="topSubjectText">
			&nbsp;Invoice Outbound
			</a></strong>
		</div>
    </td>
  </tr>
</table>

<div class="topSubject" style="width: 100%; height:auto; vertical-align: middle; text-align: center;">
<form:form id="ObjectForm-form"  modelattribute="ObjectForm" commandName="ObjectForm" method="post" action="search" >
<table class="topSubject" style="display: inline-block;">
	<tr>
		<td style="vertical-align: middle; text-align:center; width: 150px;">
			<div class="topLeftSearchCriteria">Search by Criteria</div>
		</td>
		<td>
			<div style="border-width: 1px; border-color: #D8D8D8; border-style: solid; padding: 5px; ">			
				<table width="100%" class="topSubject">
				  <tr>				  	
				  	<td>
						<label class="labelSearch">Company</label>
						<form:input path="company" cssClass="txtSearch"  autofocus="autofocus"/>
						<form:errors path="company" cssClass="error"></form:errors>
				  	</td>					
				  	<td>
						<label class="labelSearch">Project</label>
						<form:input path="project" cssClass="txtSearch"  autofocus="autofocus"/>
						<form:errors path="project" cssClass="error"></form:errors>
				  	</td>
				  	<td>
						<label class="labelSearch">DocumentNo</label>
						<form:input path="documentNo" cssClass="txtSearch"  autofocus="autofocus"/>
						<form:errors path="documentNo" cssClass="error"></form:errors>
				  	</td>
				  	<td>
						<label class="labelSearch">Ref Document No</label>
						<form:input path="refDocNo" cssClass="txtSearch"  autofocus="autofocus"/>
						<form:errors path="refDocNo" cssClass="error"></form:errors>
				  	</td>
				  	<td>
						<label class="labelSearch">Account Code</label>
						<form:input path="accountCode" cssClass="txtSearch"  autofocus="autofocus"/>
						<form:errors path="accountCode" cssClass="error"></form:errors>
				  	</td>
				  	<td>
						<label class="labelSearch">Account Code2</label>
						<form:input path="accountCode2" cssClass="txtSearch"  autofocus="autofocus"/>
						<form:errors path="accountCode2" cssClass="error"></form:errors>
				  	</td>
				  	 <td>
						<label class="labelSearch">Unit Number</label>
						<form:input path="unitNo" cssClass="txtSearch"  autofocus="autofocus"/>
						<form:errors path="unitNo" cssClass="error"></form:errors>
				  	</td>				  	
				  </tr>
				  <tr>				 
				  	<td>
						<label class="labelSearch">Status</label>
						<form:input path="status" cssClass="txtSearch"  autofocus="autofocus"/>
						<form:errors path="status" cssClass="error"></form:errors>
				  	</td>		  	
				  	<td>
						<label class="labelSearch">Staging Id</label>
						<form:input path="stagingId" cssClass="txtSearch"  autofocus="autofocus"/>
						<form:errors path="stagingId" cssClass="error"></form:errors>
				  	</td>
				  	<td>
						<label class="labelSearch">SAP Staging Id</label>
						<form:input path="sapstagingId" cssClass="txtSearch"  autofocus="autofocus"/>
						<form:errors path="sapstagingId" cssClass="error"></form:errors>
				  	</td>
				  	<td>
						<label class="labelSearch">Instance No.</label>
						<form:input path="instanceNo" cssClass="txtSearch"  autofocus="autofocus"/>
						<form:errors path="instanceNo" cssClass="error"></form:errors>
				  	</td>
				  	<td colspan="2">
				  		<div style="border-width: 1px; border-color: #D8D8D8; border-style:dashed; padding-bottom: 4px; margin-bottom: 0px; ">
					  		<label class="labelSearch">Interface Date [START - END]</label>
							<form:input path="syncCreatedOnStart" value="" cssClass="txtSearch"  autofocus="autofocus"/> - <form:input path="syncCreatedOnEnd" cssClass="txtSearch"  autofocus="autofocus"/>
							<form:errors path="syncCreatedOnStart" cssClass="error"></form:errors>				<form:errors path="syncCreatedOnEnd" cssClass="error"></form:errors>
						</div>
				  	</td>
				  	<td>
				  		<label class="labelSearch">Max Result</label>
						<form:input path="maxResult" cssClass="txtSearch"  autofocus="autofocus"/>
						<form:errors path="maxResult" cssClass="error"></form:errors>
				  	</td>
				  </tr>
				</table>			
			</div>
		</td>
		<td>
			<input id="btnSearch" type="submit" style="margin-left: 10px;" class="button round blue image-right ic-right-arrow" value="Search" />
		</td>
	</tr>
</table>
</form:form>

<link href="<pc:GetUrlUriTags value="/resources/kendoui.web.2013.2.716/content/shared/styles/examples-offline.css" />" rel="stylesheet" />
<link href="<pc:GetUrlUriTags value="/resources/kendoui.web.2013.2.716/styles/kendo.common.css" />" rel="stylesheet" />
<link href="<pc:GetUrlUriTags value="/resources/kendoui.web.2013.2.716/styles/kendo.default.css" />" rel="stylesheet" />
<script src="<pc:GetUrlUriTags value="/resources/kendoui.web.2013.2.716/js/jquery.min.js" />" ></script>
<script src="<pc:GetUrlUriTags value="/resources/kendoui.web.2013.2.716/js/kendo.web.js" />" ></script>
<script src="<pc:GetUrlUriTags value="/resources/kendoui.web.2013.2.716/content/shared/js/console.js" />" ></script>
	<div id="example" class="k-content">
            <div id="grid"></div>
            
            <script>
			
				$(document).ready(function() {
				 	setValue = function () {
                        calendar.value($("#syncCreatedOnStart").val());
                    };
                    $("#syncCreatedOnStart").kendoDatePicker({
                        format : "yyyy-MM-dd",
                        change: setValue
                    });
					
					setValue = function () {
                        calendar.value($("#syncCreatedOnEnd").val());
                    };
                    $("#syncCreatedOnEnd").kendoDatePicker({
                    	format : "yyyy-MM-dd",
                        change: setValue
                    });
                }); 
				
				
				$(document).ready(function() {
					fnSearch();
					//alert("already !!!");			 	
                });
                				
            	function fnSearch(){
                	var param_p = "stagingId=" + $("#stagingId").val();
                	param_p += "&sapstagingId=" + $("#sapstagingId").val();
                	param_p += "&company=" + $("#company").val();
                	param_p += "&project=" + $("#project").val();
                	param_p += "&documentNo=" + $("#documentNo").val();
                	param_p += "&refDocNo=" + $("#refDocNo").val();
                	param_p += "&accountCode=" + $("#accountCode").val();
                	param_p += "&accountCode2=" + $("#accountCode2").val();
                	param_p += "&unitNo=" + $("#unitNo").val();
                	param_p += "&status=" + $("#status").val();
                	
                	param_p += "&instanceNo=" + $("#instanceNo").val();
                	param_p += "&syncCreatedOnStart=" + $("#syncCreatedOnStart").val();            
                	param_p += "&syncCreatedOnEnd=" + $("#syncCreatedOnEnd").val();
                	param_p += "&maxResult=" + $("#maxResult").val();
                	
                	var dataSource_p = getDataSource(param_p);
					GridBuilding(dataSource_p);
					adjuestScreen();		
                }

                function getDataSource(param) {				
					var url_p = "<pc:GetUrlUriTags value='/fi/outbound/rental/invoice/search/json' />";
					if(param != null)
						url_p += "?" + param;
						
                	var  dataSource = new kendo.data.DataSource({
                         type: "json",
                         transport: {
                         	read: {
                             		url : url_p,
                             		dataType: "json"
                            }
                         },
                         schema: {
                             model: {
                                 fields: {
                                	 msgCode: { type: "string" },
                                	 id: { type: "string" },
                                	 project: { type: "string" },
                                	 company: { type: "string" },
                                	 documentNo: { type: "string" },
                                	 accountCode: { type: "string" },
                                	 accountCode2: { type: "string" },
                                	 amount: { type: "string" },
                                	 status: { type: "string" },
                                	 articleType: { type: "string" },
                                	 ba: { type: "string" },
                                	 baseAmount: { type: "string" },
                                	 baseLineDate: { type: "string" },
                                	 batchNo: { type: "string" },
                                	 boqItem: { type: "string" },
                                	 boqSerial: { type: "string" },
                                	 boqSeries: { type: "string" },
                                	 boqType: { type: "string" },
                                	 branchCode: { type: "string" },
                                	 chargeCode: { type: "string" },
                                	 chargeDescription: { type: "string" },
                                	 clOb: { type: "string" },
                                	 costCenter: { type: "string" },
                                	 costCode: { type: "string" },
                                	 currency: { type: "string" },
                                	 description1: { type: "string" },
                                	 description2: { type: "string" },
                                	 docType: { type: "string" },
                                	 expBatchNo: { type: "string" },
                                	 expCreatedOn: { type: "string" },
                                	 expRefCode: { type: "string" },
                                	 fileId: { type: "string" },
                                	 flagManual: { type: "string" },
                                	 glPostingSeqNumber: { type: "string" },
                                	 importInvRef: { type: "string" },
                                	 narration: { type: "string" },
                                	 orgCode: { type: "string" },
                                	 poNo: { type: "string" },
                                	 poSeqNo: { type: "string" },
                                	 poSeries: { type: "string" },
                                	 poType: { type: "string" },
                                	 postingDate: { type: "string" },
                                	 postingKey: { type: "string" },
                                	 postingNumber: { type: "string" },
                                	 postingSeries: { type: "string" },
                                	 refDocNo: { type: "string" },
                                	 refTenant: { type: "string" },
                                	 referenceCode: { type: "string" },
                                	 revision: { type: "string" },
                                	 sapStagingId: { type: "string" },
                                	 specialGl: { type: "string" },
                                	 subProject: { type: "string" },
                                	 unitNo: { type: "string" },
                                	 vatCode: { type: "string" },
                                	 voucherDate: { type: "string" },
                                	 voucherNumber: { type: "string" },
                                	 voucherSeries: { type: "string" },
                                	 voucherType: { type: "string" },
                                	 wbs: { type: "string" },
                                	 bankType: { type: "string" },
                                	 costCtr: { type: "string" },
                                	 internalOrder: { type: "string" },
                                	 dummy1: { type: "string" },
                                	 dummy2: { type: "string" },
                                	 dummy3: { type: "string" },
                                	 dummy4: { type: "string" },
                                	 dummy5: { type: "string" },
                                	 createdBy: { type: "string" },
                                	 createdOn: { type: "string" },
                                	 updatedBy: { type: "string" },
                                	 updatedOn: { type: "string" },
                                	 instanceNo: { type: "string" },
                                	 msgAltDesc: { type: "string" },
                                	 msgDesc: { type: "string" },
                                	 extRefKey: { type: "string" },
                                	 extRefNo: { type: "string" },                                	 
                                	 syncIssync: { type: "string" },     
                                	 useMinute: { type: "string" },
                                	 useSecond: { type: "string" },
                                	 pmsUseEnd: { type: "string" },
                                	 pmsUseStart: { type: "string" },
                                	 procEndTime: { type: "string" },
                                	 procStartTime: { type: "string" },
                                	 procUseTime: { type: "string" },
                                	 processAction: { type: "string" },
                                	 processLevel: { type: "string" },
                                	 processingCount: { type: "string" },
                                	 processingName: { type: "string" },
									 syncCreatedonToString: { type: "string" },
									 syncUpdatedonToString: { type: "string" }
                                 }
                             }
                         },
                         pageSize: 200,
                         serverPaging: false,
                         serverFiltering: false,
                         serverSorting: false
                     });
					 return dataSource;
                }
				
				function GridBuilding(dataSource_p){
					$("#grid").kendoGrid({
                        dataSource: dataSource_p,
                        height: 430,                        
                        scrollable: true,
                        sortable: true,
                        filterable: true,
                        reorderable: true,
                        resizable: true,
                        pageable: {
                        	refresh: true,
                            input: true,
                            numeric: false
                        },
                        columns: [{	field:"msgCode", title: "Msg Code" , width: 80, filterable: true },                                  
                                  { field:"id" , width: 180, filterable: true },
                                  { field:"project" , width: 180, filterable: true },
                                  { field:"company" , width: 180, filterable: true },
                                  { field:"documentNo" , width: 180, filterable: true },
                                  { field:"accountCode" , width: 180, filterable: true },
                                  { field:"accountCode2" , width: 180, filterable: true },
                                  { field:"amount" , width: 180, filterable: true },
                                  { field:"status" , width: 180, filterable: true },
                                  { field:"articleType" , width: 180, filterable: true },
                                  { field:"ba" , width: 180, filterable: true },
                                  { field:"baseAmount" , width: 180, filterable: true },
                                  { field:"baseLineDate" , width: 180, filterable: true },
                                  { field:"batchNo" , width: 180, filterable: true },
                                  { field:"boqItem" , width: 180, filterable: true },
                                  { field:"boqSerial" , width: 180, filterable: true },
                                  { field:"boqSeries" , width: 180, filterable: true },
                                  { field:"boqType" , width: 180, filterable: true },
                                  { field:"branchCode" , width: 180, filterable: true },
                                  { field:"chargeCode" , width: 180, filterable: true },
                                  { field:"chargeDescription" , width: 180, filterable: true },
                                  { field:"clOb" , width: 180, filterable: true },
                                  { field:"costCenter" , width: 180, filterable: true },
                                  { field:"costCode" , width: 180, filterable: true },
                                  { field:"currency" , width: 180, filterable: true },
                                  { field:"description1" , width: 180, filterable: true },
                                  { field:"description2" , width: 180, filterable: true },
                                  { field:"docType" , width: 180, filterable: true },
                                  { field:"expBatchNo" , width: 180, filterable: true },
                                  { field:"expCreatedOn" , width: 180, filterable: true },
                                  { field:"expRefCode" , width: 180, filterable: true },
                                  { field:"fileId" , width: 180, filterable: true },
                                  { field:"flagManual" , width: 180, filterable: true },
                                  { field:"glPostingSeqNumber" , width: 180, filterable: true },
                                  { field:"importInvRef" , width: 180, filterable: true },
                                  { field:"narration" , width: 180, filterable: true },
                                  { field:"orgCode" , width: 180, filterable: true },
                                  { field:"poNo" , width: 180, filterable: true },
                                  { field:"poSeqNo" , width: 180, filterable: true },
                                  { field:"poSeries" , width: 180, filterable: true },
                                  { field:"poType" , width: 180, filterable: true },
                                  { field:"postingDate" , width: 180, filterable: true },
                                  { field:"postingKey" , width: 180, filterable: true },
                                  { field:"postingNumber" , width: 180, filterable: true },
                                  { field:"postingSeries" , width: 180, filterable: true },
                                  { field:"refDocNo" , width: 180, filterable: true },
                                  { field:"refTenant" , width: 180, filterable: true },
                                  { field:"referenceCode" , width: 180, filterable: true },
                                  { field:"revision" , width: 180, filterable: true },
                                  { field:"sapStagingId" , width: 180, filterable: true },
                                  { field:"specialGl" , width: 180, filterable: true },
                                  { field:"subProject" , width: 180, filterable: true },
                                  { field:"unitNo" , width: 180, filterable: true },
                                  { field:"vatCode" , width: 180, filterable: true },
                                  { field:"voucherDate" , width: 180, filterable: true },
                                  { field:"voucherNumber" , width: 180, filterable: true },
                                  { field:"voucherSeries" , width: 180, filterable: true },
                                  { field:"voucherType" , width: 180, filterable: true },
                                  { field:"wbs" , width: 180, filterable: true },
                                  { field:"bankType" , width: 180, filterable: true },
                                  { field:"costCtr" , width: 180, filterable: true },
                                  { field:"internalOrder" , width: 180, filterable: true },
                                  { field:"dummy1" , width: 180, filterable: true },
                                  { field:"dummy2" , width: 180, filterable: true },
                                  { field:"dummy3" , width: 180, filterable: true },
                                  { field:"dummy4" , width: 180, filterable: true },
                                  { field:"dummy5" , width: 180, filterable: true },
                                  { field:"createdBy" , width: 180, filterable: true },
                                  { field:"createdOn" , width: 180, filterable: true },
                                  { field:"updatedBy" , width: 180, filterable: true },
                                  { field:"updatedOn" , width: 180, filterable: true },
                                  { field:"instanceNo" , width: 180, filterable: true },
                                  { field:"msgAltDesc" , width: 180, filterable: true },
                                  { field:"msgDesc" , width: 180, filterable: true },
                                  { field:"extRefKey" , width: 180, filterable: true },
                                  { field:"extRefNo" , width: 180, filterable: true },                                  
                                  { field:"syncIssync" , width: 180, filterable: true }, 
                                  { field:"useMinute" , width: 180, filterable: true },
                                  { field:"useSecond" , width: 180, filterable: true },
                                  { field:"pmsUseEnd" , width: 180, filterable: true },
                                  { field:"pmsUseStart" , width: 180, filterable: true },
                                  { field:"procEndTime" , width: 180, filterable: true },
                                  { field:"procStartTime" , width: 180, filterable: true },
                                  { field:"procUseTime" , width: 180, filterable: true },
                                  { field:"processAction" , width: 180, filterable: true },
                                  { field:"processLevel" , width: 180, filterable: true },
                                  { field:"processingCount" , width: 180, filterable: true },
                                  { field:"processingName" , width: 180, filterable: true },
                                  {	field:"syncCreatedonToString", title: "Staging Date" , width: 150, filterable: true },
                                  {	field:"syncUpdatedonToString", title: "Interface Date" , width: 150, filterable: true }
                        ]
                    });
				}                
            </script>
        </div>

</div>

<!-- END BODY -->
<%@ include file="/WEB-INF/views/commons/footer.jsp" %>